<template>
    <el-pagination @current-change="handleCurrentChange" :current-page="current" :page-size="size"
        layout="total,prev, pager, next,jumper,sizes" :page-sizes="[10, 20, 30, 40, 50]" background :pager-count="5"
        :total="total" @size-change="handleSizeChange">
    </el-pagination>
</template>

<script>
export default {
    name: "EPagenation",
    props: {
        total: {
            default: 0,
            type: Number,
        },
    },
    data() {
        return {
            size: 10,
            current: 1,
        };
    },
    methods: {
        init() {
            this.current = 1;
            this.size = 10;
        },
        handleCurrentChange(val) {
            this.current = val;
            this.$emit("currentPageClick", { nCurrent: val, nSize: this.size });
        },
        handleSizeChange(val) {
            this.size = val;
            this.current = 1;
            this.$emit("currentPageClick", { nCurrent: this.current, nSize: val });
        },
    },
};
</script>

<style lang="scss" scoped>
$color1: #0e90fe;
$color2: rgba(243, 243, 243, 1);
$color3: #fff;
$color4: rgb(244, 244, 244);
$color5: rgba(220, 220, 220, 1);
$color6: #303133;
$radius: 4px;
$color-size: 14px;

.sp-pagination {

    ::v-deep .btn-prev,
    ::v-deep .btn-next {
        border: 1px solid $color5 !important;
        background: center center no-repeat $color4 !important;
        padding-left: 0;
        padding-right: 0;
        padding: 0 8px;
        border-radius: $radius;
        font-size: $color-size;
    }

    ::v-deep .btn-prev:hover,
    ::v-deep .btn-next:hover {
        color: $color1;
    }

    ::v-deep .el-pagination__total {
        margin: 0 10px;
        color: $color6;
        font-size: $color-size;
    }

    ::v-deep .el-pagination__jump {
        margin: 0;
        color: $color6;
        font-size: $color-size;
    }

    ::v-deep .el-pager {
        .number {
            border: 1px solid $color5;
            border-radius: $radius;
            margin: 0 5px;
        }

        .number:hover {
            border: 1px solid $color5;
            color: $color1;
        }

        .active {
            background-color: $color1;
            border: 1px solid $color5;
            color: $color3;
            pointer-events: none;
        }
    }
}
</style>